<template>
  <div class="question-editor">
    <el-form :model="question" label-width="100px">
      <el-form-item label="题目内容">
        <el-input
          v-model="question.content"
          type="textarea"
          :rows="3"
          placeholder="请输入题目内容..."
        />
      </el-form-item>

      <el-form-item v-if="hasOptions" label="题目选项">
        <div class="options-list">
          <div v-for="(option, index) in question.options" :key="index" class="option-item">
            <el-input v-model="question.options[index]">
              <template #prepend>
                <span class="option-label">{{ String.fromCharCode(65 + index) }}</span>
              </template>
              <template #append>
                <el-button
                  :icon="Delete"
                  @click="removeOption(index)"
                  :disabled="question.options.length <= 2"
                />
              </template>
            </el-input>
          </div>
        </div>
        <el-button type="primary" text @click="addOption">
          <el-icon><Plus /></el-icon>添加选项
        </el-button>
      </el-form-item>

      <el-form-item v-if="hasAnswer" label="正确答案">
        <component
          :is="answerComponent"
          v-model="question.correctAnswer"
          class="answer-selector"
        >
          <template v-for="(_, index) in question.options" :key="index">
            <component
              :is="answerComponent === ElRadioGroup ? ElRadio : ElCheckbox"
              :label="String.fromCharCode(65 + index)"
            >
              {{ question.options[index] }}
            </component>
          </template>
        </component>
      </el-form-item>

      <el-form-item v-if="questionType === 'shortAnswer'" label="参考答案">
        <el-input
          v-model="question.referenceAnswer"
          type="textarea"
          :rows="3"
          placeholder="请输入参考答案..."
        />
      </el-form-item>

      <el-form-item label="题目难度">
        <el-select v-model="question.difficulty">
          <el-option
            v-for="item in difficultyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="题目分值">
        <el-input-number v-model="question.score" :min="1" :max="20" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { ElCheckbox, ElRadio, ElCheckboxGroup, ElRadioGroup } from 'element-plus'
import { Delete, Plus } from '@element-plus/icons-vue'

const props = defineProps({
  question: {
    type: Object,
    required: true
  },
  questionType: {
    type: String,
    default: 'single'
  }
})

const emit = defineEmits(['remove'])

const hasOptions = computed(() =>
  ['single', 'multiple', 'truefalse'].includes(props.questionType)
)

const hasAnswer = computed(() =>
  ['single', 'multiple', 'truefalse'].includes(props.questionType)
)

const answerComponent = computed(() =>
  props.questionType === 'multiple' ? ElCheckboxGroup : ElRadioGroup
)

const difficultyOptions = [
  { value: 'easy', label: '简单' },
  { value: 'medium', label: '中等' },
  { value: 'hard', label: '困难' }
]

const addOption = () => {
  if (props.question.options.length < 6) {
    props.question.options.push('')
  }
}

const removeOption = (index) => {
  if (props.question.options.length > 2) {
    props.question.options.splice(index, 1)
  }
}
</script>

<style lang="scss" scoped>
.question-editor {
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

  .options-list {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;

    .option-item {
      display: flex;
      align-items: center;
      gap: 8px;

      .option-label {
        width: 24px;
        text-align: center;
        font-weight: bold;
      }
    }
  }

  .answer-selector {
    display: grid;
    gap: 12px;
  }
}
</style>